<template>
  <h1>薪资信息</h1>
  <el-table :data="tableData.data" style="width: 100%;margin-top: 20px">

    <el-table-column label="序号" type="index" width="80" align="center">
    </el-table-column>


    <el-table-column label="基本工资" prop="basicSalary" width="100" align="center">

      <template #default="scope">
        <div>{{(scope.row.basicSalary/100).toFixed(2)+'元'}}</div>
      </template>
    </el-table-column>


    <el-table-column label="补贴" prop="allowance" width="100" align="center">

      <template #default="scope">
        <div>{{(scope.row.allowance/100).toFixed(2)+'元'}}</div>
      </template>
    </el-table-column>



    <el-table-column label="薪资" prop="total" width="100" align="center">

      <template #default="scope">
        <div>{{(scope.row.total/100).toFixed(2)+'元'}}</div>
      </template>
    </el-table-column>

    <el-table-column label="类别" prop="type" width="120" align="center">
    </el-table-column>

    <el-table-column label="操作" width="200px" align="center">
      <template #default="scope">
        <el-button
          style="width: 60px;"
          size="small"
          @click="handleEdit(scope.row)"
        >修改
        </el-button>
        <el-button
          style="width: 60px;"
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
        >删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
<!--  <div style=" display: flex;
  justify-content: flex-end;">
    <el-pagination
      small
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      class="pagiantion "
      @current-change="pageChange"
      v-model:current-page="query.employeeData.pages"
      v-model:page-size="query.employeeData.size"
    />
  </div>-->
</template>

<script lang="js" setup>
import { onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { deleteSalary, getSalary } from "@/utils/salaryRequest";

const router = useRouter();
//展示数据
const tableData = reactive({
  data: [
    {
      "slarayId": 1,
      "basicSalary": 300000,
      "allowance": 150000,
      "type": 0,
      "total": 450000,
      "createTime": 1702550191000,
      "updateTime": 1702550191000,
      "idDelete": "0"
    },
  ],
  // total: 0,
  // current: 1, //当前页数
  // size: 2  //每页显示几条数据
});

//请求参数


//组件加载时触发
onMounted(() => {
  getalaryData();
});

//获取数据
const getalaryData = async (requestData) => {
  let res = await getSalary(requestData);
  tableData.data = res.data;
};


//修改回调
const handleEdit = (row) => {
  router.push({
    path:'/home/updateSalary',
    query:{id:row.slarayId}
  })
};

//删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    "确定要删除吗?",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(async () => {
      let res = await deleteSalary(row.slarayId);
      if (res.data) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg
        });
      }
      getalaryData();

    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

</script>

<style scoped>
</style>